import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.less'
import PageTopImage from '../../assets/image/banner.png'
import { AtIcon } from 'taro-ui'
import api from '../../service/api';

export default class BannerDetail extends Taro.Component {

  config = {
    navigationBarTitleText: '问诊活动'
  }

  constructor() {
    super(...arguments)
    this.state = {
      amount:90,
      evenPoint:true
    }
  }

  pay = () =>{
    if(this.state.evenPoint == false){
      return false
    }

    this.setState({
      evenPoint:false
    })

    let params = {}
    let that = this
    params.amount = this.state.amount
    params.userId = Taro.getStorageSync('loginInfo').userId
    //获取医生列表
    api.get('/pay/orders',params).then(res => {

      Taro.requestPayment({
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        signType: 'MD5',
        paySign: res.data.paySign,
        success (res) {
          Taro.showToast({
            title: '成功',
            icon: 'success',
            duration: 2000
          })
          that.setState({
            evenPoint:true
          })
        },
        fail (res) {
          Taro.showToast({
            title: '支付失败',
            icon:'none',
            duration: 2000
          })
          that.setState({
            evenPoint:true
          })
         }
      })
    })
  }

  render() {
    return (
      <View className='page'>
        <View className='page-top'>
          <Image className='page-top-image' src={PageTopImage} />
        </View>
        <View className='page-main'>
          <View className='page-main-article'>
            <View className='page-main-article__h2'>
              <AtIcon prefixClass='icon' value='report' size='18' color='#4d484a'></AtIcon>
              &nbsp;问诊服务介绍
            </View>
            <View className='page-main-article__p'>
              <View>
                佑蜜医生均经过严格筛选。
              </View>
              <View>
                佑蜜专员实地验证其拥有卫计委颁发的《医师资格证》和《医师执业证》，以及所在医院的工作证。医生的具体咨询意见仅供参考。
              </View>
            </View>
            <View className='page-main-article__h2'>
              <AtIcon prefixClass='icon' value='human' size='18' color='#4d484a'></AtIcon>
              &nbsp;服务适合人群
            </View>
            <View className='page-main-article__p'>
              20岁-45岁的备孕女性
            </View>
            <View className='page-main-article__h2'>
              <AtIcon prefixClass='icon' value='time' size='18' color='#4d484a'></AtIcon>
              &nbsp;服务有效期
            </View>
            <View className='page-main-article__p'>
              每次问诊服务持续24小时，服务时间内有3次提问机会。
            </View>
          </View>
        </View>
        <View className='page-bottom'>
          <View className='page-bottom-btn' onClick={this.pay.bind(this)}>
            <View>
              确认支付 ￥99
            </View>
          </View>
          <View className='page-bottom-tips'>
            如有问题请致电客服 400 015 0560
          </View>
        </View>
      </View>
    )
  }
}
